<template>
  <div class="page-card">
    <plate-card :icon="TitleIcon" title="异常告警">
      <div class="py-6 list-wrapper">
        <el-row>
          <el-col v-for="(item, index) in dataList" :key="index" :span="8" class="flex flex-col items-center justify-center mb-3">
            <div class="value-wrapper pt-2">
              <div class="flex items-center h-[22px]">
                <span class="font-bold text-[16px]">{{ item.value }}</span>
                <span v-if="item.desc && item.value != '阴'" class="desc w-[10px] whitespace-pre-wrap">{{ item.desc }}</span></div
              >
              <div class="mt-1 text-[#00D9FF] !text-[10px] scale-[0.7] w-full whitespace-nowrap text-center">{{ item.title }}</div>
              <!--              <img :src="item.image" alt="" class="w-full h-full" />-->
            </div>
          </el-col>
        </el-row>
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import { onUnmounted, ref } from 'vue'
  import TitleIcon from '@/assets/images/card-title/warning-info.png'
  import { getAssetsFile } from '@/utils'

  const dataList = ref([
    { title: '气象异常', value: '中雨', desc: '转阴', image: getAssetsFile('warning-info/1.png') },
    { title: '温度异常℃', value: '无', image: getAssetsFile('warning-info/2.png') },
    { title: '湿度异常%', value: '无', image: getAssetsFile('warning-info/3.png') },
    { title: 'CO₂浓度超标', value: '0.35', image: getAssetsFile('warning-info/4.png') },
    { title: '农机异常', value: '3', image: getAssetsFile('warning-info/5.png') },
    { title: '电磁阀异常', value: '1', image: getAssetsFile('warning-info/6.png') }
  ])

  const randomData = [
    ['中雨', '小雨', '晴', '大雨', '晴', '多云', '阴', '晴', '小雪', '大雨'],
    [37.3, 35.2, 16.8, 32.5, 19.2, '无', '无', '无', '无', '无'],
    [56, 8, 24, 33, 42, '无', '无', '无', '无', '无'],
    [0.35, 0.32, 0.33, 0.31, 0.34, 0.36, 0.37, 0.38, 0.39, 0.4],
    [1, 1, 2, 2, 3, 3, 1, 2, 3, 1],
    [1, 1, 2, 2, 3, 3, 1, 2, 3, 1]
  ]

  // 赋值随机数据
  const setRandomValue = () => {
    for (let index = 0; index < dataList.value.length; index++) {
      dataList.value[index].value = randomData[index][Math.floor(Math.random() * 10)]
    }
  }
  const timer = setInterval(() => {
    setRandomValue()
  }, 30 * 1000)
  onUnmounted(() => {
    clearInterval(timer)
  })
</script>

<style lang="scss" scoped>
  .value-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 66px;
    height: 66px;
    font-weight: bold;
    background: url('@/assets/images/wrapper-bg/2.png') no-repeat top;
    background-size: 100% 100%;
    .desc {
      white-space: pre-wrap;
      font-size: 10px;
      transform: scale(0.7);
    }
  }
  .list-wrapper {
    margin-top: 6px;
    background: url('@/assets/images/board-bg.png') top no-repeat;
    background-size: 100% 100%;
  }
</style>
